<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要bb的内容（最多120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>
        <!-- 渲染评论数据在页面,即是评论内容-->
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comment" :key="item.add_time">
                <div class="cmt-title">第{{i+1}}楼&nbsp;用户&nbsp;：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time|dataFormat}}</div>
                <div class="cmt-body"> {{item.content==='undefined'?"该用户什么都没说":item.content}}</div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
    data(){
        return {
         pageIndex:1,
         comment:[],
         msg:null

        }
    },
    created(){
        this.getcomment()
    },
    methods:{
        // 获取评论数据
        getcomment(){
            // 这里的id是父组件传过来的，每条新闻都对应一个id，因为每条新闻的评论都是不一样的，pageindex是第几页
            this.$http.get("http://www.liulongbin.top:3005/api/getcomments/" + this.id + "?pageindex=" + this.pageIndex).then(result=>{
                   console.log(result.body)
                if(result.body.status===0){
                //    this.comment=result.body.message
                // 把每次请求后数据拼接起来，这样子就不会把前面的数据覆盖
                this.comment=this.comment.concat(result.body.message)
                }else{
                    Toast('评论加载失败')
                }
            })
        },
        //加载更多
        getmore(){
            // 先页数自增
         this.pageIndex++
         //  然后再把数据加载一次（此时不应该覆盖前面的评论）
         this.getcomment()
        },
        //提交评论
        postcomment(){
            // 先判断提交的评论是否为空
            if(this.msg.trim().length===0){
                return Toast('评论不能为空啊')
            }
        // 利用post提交：参数1是url，参数2是提交内容对象，参数3是提交表单格式,前面已经全局配置了格式，所以这里不用写
            this.$http.post("http://www.liulongbin.top:3005/api/postcomment/"+this.$route.params.id,{content:this.msg.trim()})
            .then(result=>{
                if(result.body.status===0){
                    // 添加上去，
                var cmt={user_name:"匿名用户",add_time:Date.now(),content:this.msg.trim()}
                this.comment.unshift(cmt)
                this.msg=" "
                }else{
                    // 请求失败
                    Toast('添加评论失败')
                }
            })
        }

    },
    props:['id']
}
</script>
<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size: 16px;
    }
    textarea{
        margin: 0;
        font-size: 14px;
        height: 85px;
    }
    .cmt-list{
        margin: 5px 0;
        .cmt-item{
            font-size: 13px;
            .cmt-title{
             line-height: 30px;
             background-color: #ccc;
            }
            .cmt-body{
            line-height: 35px;
            text-indent: 2em;
            }
        }
    }
}

</style>